<template>
  <div>
    <dd-table
      :list-data="listData"
      @selection-change="handleSelectionChange"
      v-bind="contentTableConfig"
      :list-count="dataCount"
      v-model:paginationInfo="paginationInfo"
    >
      <template #headerHandler>
        <div class="flex space-x-4 items-center">
          <el-button
            v-if="isCreate"
            icon="el-icon-plus"
            size="medium"
            type="primary"
            @click="handleCreateBtnClick"
            >{{ createName }}
          </el-button>
          <i class="el-icon-refresh"></i>
          <i class="el-icon-share"></i>
        </div>
      </template>

      <!--    列的内容-->
      <template #status="scope">
        <el-button
          plain
          size="mini"
          :type="scope.row.enable ? 'success' : 'danger'"
          @click="handleStatusClick(scope)"
          >{{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #createAt="scope">
        <strong>{{ scope.row.createAt }}</strong>
      </template>
      <template #handle="scope">
        <div>
          <el-button
            v-if="isUpdate"
            icon="el-icon-edit"
            type="text"
            size="mini"
            @click="handleEditClick(scope.row)"
            >编辑
          </el-button>
          <el-button
            v-if="isDelete"
            icon="el-icon-delete"
            type="text"
            size="mini"
            @click="centerDialogVisible = true"
            >删除
          </el-button>
          <el-dialog
            v-model="centerDialogVisible"
            title="慎重！"
            width="30%"
            center
          >
            <span>确定要删除该条记录吗?</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleDeleteClick(scope.row)"
                  >确定</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>
      </template>
      <!--非默认的插槽，需自定义-->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </dd-table>
  </div>
</template>

<script setup lang="ts">
import DdTable from '@/base-ui/table'
import { defineProps, defineExpose, defineEmits, ref, watch } from 'vue'
import { useStore } from '@/store'
import { computed } from 'vue'
import { usePermission } from '@/hooks/usePermission'

const props = defineProps({
  contentTableConfig: {
    type: Object,
    required: true
  },
  pageName: {
    type: String,
    required: true
  }
})
const store = useStore()
const emit = defineEmits(['createBtnClick', 'editBtnClick'])

//权限设置,依次是 查-增-删-改
//system:user:create
const isQuery = usePermission(props.pageName, 'query')
const isCreate = usePermission(props.pageName, 'create')
const isDelete = usePermission(props.pageName, 'delete')
const isUpdate = usePermission(props.pageName, 'update')

//1.双向绑定paginationInfo
const paginationInfo = ref({
  currentPage: 1,
  pageSize: 10
})
watch(paginationInfo, (pageInfo) => {
  getPageData()
})

//2.进入页面发送网络请求
const getPageData = (queryInfo: any) => {
  //若没有查询权限，直接返回
  if (!isQuery) return
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      offset:
        (paginationInfo.value.currentPage - 1) * paginationInfo.value.pageSize,
      size: paginationInfo.value.pageSize,
      ...queryInfo
    }
  })
}
getPageData()
//对外使用
defineExpose({
  getPageData
})

//3.从vuex中获取数据
const listData = computed(() =>
  store.getters['system/pageListData'](props.pageName)
)
const dataCount = computed(() =>
  store.getters['system/pageListCount'](props.pageName)
)

//4.获取其他的动态插槽
const otherPropSlots = props.contentTableConfig?.propList.filter(
  (item) =>
    item?.slotName !== 'createAt' &&
    item?.slotName !== 'updateAt' &&
    item?.slotName !== 'handle'
)

//删除/编辑/新建操作
//控制弹窗的出现与否
const centerDialogVisible = ref(false)
const handleDeleteClick = (item: any) => {
  console.log(item)
  store.dispatch('system/deletePageDataAction', {
    pageName: props.pageName,
    id: item.id
  })
  centerDialogVisible.value = false
}
const handleEditClick = (item: any) => {
  emit('editBtnClick', item)
}
const handleCreateBtnClick = () => {
  emit('createBtnClick')
}

//设置新增按钮的名称
const createName = props.contentTableConfig?.createName ?? '新增数据'
const handleSelectionChange = (value) => {
  console.log(value)
}
</script>

<style scoped></style>
